<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script>
			// 做劫持用的
			function observer(data){
				
			}

			let o = {a:1,b:2};

			let newO = new Proxy(o,{
				get(target,attr){
					console.log(target,attr);
					return target[attr]
				},
				set(target,attr,newValue){
					console.log('设置',target,attr,newValue);
					target[attr] = newValue;
				}
			});
			newO.a = '设置新值'
			console.log(newO.a);
			console.log(newO.b);

		</script>
	</head>

	<body>
		<div id="app">
			<button id="btn">设置</button>
			<p id="title"></p>
		</div>
		<script>
			let title = document.querySelector('#title')
			let btn = document.querySelector('#btn')
			let data = {
				title: 'hello,测试',
				message: 'hello,测试'
			}

			// 劫持
			observer(data)

			title.innerHTML = data.title;

			btn.onclick = function (){
				data.title = '改变了'
			}

		</script>
	</body>
</html>